<template>
  <div class="chart-map" ref="chartmap"></div>
</template>

<script>
import suqian from '../suqian.json'
import * as echarts from 'echarts'
import {getServiceArea} from '@/api/api'
export default {
  data() {
    return {
        mapData:[]
    }
  },
  mounted() {
    getServiceArea().then((res)=>{
        if(res.success){
            this.mapData = res.result.record||res.result
            this.initCharts()
        }
    })
    
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs.chartmap)
      let airData = this.mapData

      const option = {
        // 背景颜色
        backgroundColor: 'white',
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item', // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(0, 0, 0, 0.16);',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: false,
          textStyle: {
            color: '#DADADA',
            fontSize: '12',
            width: 20,
            height: 30,
            overflow: 'break',
          },
          formatter: (params) => {
            return `${params.name}:商家入驻${params.value}个`
          },
          showDelay: 10,
        },
        // 地图配置
        geo: {
          map: 'suqian',
          label: {
            show: true,
            formatter: (params) => {
              let value = 0
              let arr = airData.filter((item) => {
                if (item.name === params.name) return item
              })

              return `${params.name}\n${arr[0].value}`
            },
          },
          zoom: 1.2,
          //   center: ['30%', '30%'],
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: '#1a5acb33',
              borderWidth: 1,
              areaColor: '#EFF4FF',
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#1E70FF',
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            data: airData,
            geoIndex: 0, //将数据和第0个geo配置关联在一起
            type: 'map',
          },
        ],
      }
      echarts.registerMap('suqian', suqian)
      charts.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.chart-map {
  height: 490px;
  width: 90%;
}
</style>